<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        padding: 50px;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <!-- 
    1. 介绍下 emits 选项的作用：

      Vue3中新增的一个选项，用于声明组件会对外触发的自定义事件有哪些。
      它有简单数组写法，还有对象写法。
      它也可以不用声明，不影响组件的 $emit 的触发。但是可能会出现触发多次的Bug，建议都声明上。

    2. emits 不声明时的 bug 原因是什么。
      
      Vue3中没有被 emits 声明的事件，也会当成一个 attr，然后也会有继承的特性，继承到组件的根元素上。


    3. Vue2 与 Vue3 的 Attr 有何不同：
      
      Vue3: 没有被 props 与 emits 声明的，都会变成 Attr
      Vue2: 只管没有被 props 声明的。
            给组件绑定的所有事件，在一个 $listeners 实例属性中

   -->

    <div id="app"></div>

    <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";

      const app = new Vue({
        template: `
          <Hello @click.native="handleClick" />
        `,

        methods: {
          handleClick() {
            console.log("handleClick");
          },
        },
      });

      Vue.component("Hello", {
        template: `
          <div class="box">
            <h2>Hello</h2>  
            <button @click="$emit('click')">点我</button>
          </div>
        `,
        created() {
          console.log("this", this);
        },
      });

      app.$mount("#app");
    </script>

    <!-- <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({
        template: `
          <Hello @click="handleClick" />
        `,

        methods: {
          handleClick() {
            console.log("handleClick");
          },
        },
      });

      app.component("Hello", {
        emits: ["click"],

        template: `
          <div class="box">
            <h2>Hello</h2>  
            <button @click="$emit('click')">点我</button>
          </div>
        `,
      });

      app.mount("#app");
    </script> -->
  </body>
</html>
